<template>
  <div class="page" v-if="res">
    <div class="head">
      <h1 v-if="res.currentDefenseNum == null">{{ res.castleNickname }}</h1>
      <group gutter="0" v-else class="edit-name" :class="{'editable': nameCanEdit}">
        <x-textarea v-model="res.castleNickname" @on-focus="nameCanEdit = true" @on-blur="nameEditDone()" placeholder="点击编辑城堡名字" :max="8" :rows="1" :cols="1" :show-counter="false"></x-textarea>
      </group>
      <router-link tag="div" class="backhome" to="/home" replace></router-link>
    </div>
    <div class="panel">
      <help class="help">
        <div>
          <p>城主可以设置城池名以及签名，可以设置驻防小猴，修补城防升级城堡。 玩家可以选择小猴攻击城堡，出征后10分钟到达战场，如到达时间该城堡进入保护期则小猴会无功而返。一座城堡最多同时被10支队伍攻击。 攻击方先行进攻，城防优先承受伤害。攻击和防守方都有概率战死或被俘。
          </p>
        </div>
      </help>
      <div class="monkey">
        <div class="img">
          <img :src="res.castleImgUrl" :style="{background: '#eafee1'}">
        </div>
        <div class="info">
          <p>方位：{{ res.castleName }}</p>
          <p>城主：{{ res.castleOwnerName }}</p>
          <p>状态：
            <count-down :startTime="res.systemTime" :endTime="res.canAttackTime" endText="可攻击" surfixText="后可攻击"></count-down>
          </p>
          <p>昨日收益：{{ Math.floor(res.profit || 0 )}} 猴毛</p>
        </div>
      </div>
      <div class="category">
        <div class="filter">
          <ul class="status">
            <li v-for="(item, index) in category" :class="{'active': index == activeIndex}" @click="changeCategory(index)" :key="'filter'+index">{{$t(item)}}</li>
          </ul>
        </div>
        <swiper :options="swiperOption" ref="mySwiper" class="swiper">
          <swiper-slide class="brief">
            <div class="vistor" v-if="res.currentDefenseNum == null">{{ res.castleRemark }}</div>
            <group v-else :class="{'editable': canEdit}">
              <x-textarea v-model="res.castleRemark" @on-focus="canEdit = true" @on-blur="editDone()" placeholder="点击编辑简介" :max="40" :rows="1" :cols="1" autosize :show-counter="canEdit"></x-textarea>
            </group>
          </swiper-slide>
          <swiper-slide class="battle">
            <ul>
              <li v-for="(item,index) in res.attackRecordVo.records" :key="'attack'+index">
                <p>{{ item.attackTime | formatTime }}</p>
                <router-link tag="div" class="bat" :to="`/battle?id=${item.id}`">
                  <div class="attack">
                    <img :src="item.attackerImg" :style="{background: '#eafee1'}">
                    <p>[攻]{{ item.attacker }}</p>
                  </div>
                  <div class="result">
                    <img :src="`/static/result-${item.reslut}.svg`">
                    <p>攻击{{item.reslut == 1 ? '成功' : '失败'}}</p>
                  </div>
                  <div class="defense">
                    <img :src="res.castleImgUrl" :style="{background: '#eafee1'}">
                    <p>[防]{{ item.castleName }}</p>
                  </div>
                </router-link>
              </li>
            </ul>
            <empty v-if="res.attackRecordVo.records.length == 0"></empty>
          </swiper-slide>
          <swiper-slide class="gold">
            <ul v-if="res.profitVo && res.profitVo.total > 0">
              <li v-for="(item, index) in res.profitVo.records" v-if="index < 10" :key="'history'+index">
                <div>{{ item.date | formatTime }}</div>
                <div>/</div>
                <div>+{{ item.value | toFix(2) }} 猴毛</div>
              </li>
            </ul>
            <empty v-else></empty>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="panel" v-if="res.attackIngList.length > 0">
      <div class="title">
        <h2>攻击队列</h2>
      </div>
      <div class="progress" v-for="(item,index) in res.attackIngList" v-if="systemTime <= item.actualAttackTime" :key="'progress'+index">
        <vprogress :strokeColor="colorList[index]" status="exception" :percentage="calcPercent(item)" :text-inside="true" :stroke-width="18" :striped="true">{{ item.attacker }} {{timeLeft(item.actualAttackTime)}}</vprogress>
        <div class="icon" v-if="item.attackId < 0" @click="cancelAttack(item.id)">X</div>
      </div>
    </div>
    <div class="panel">
      <div class="title">
        <h2>{{$t('操作')}}</h2>
      </div>
      <div class="btns">
        <div>
          <x-button mini type="primary" @click.native="showDefendList = !showDefendList">{{ res.currentDefenseNum == null ? '进攻' : '驻防'}}</x-button>
          <span>{{ res.currentMonkeyNum || 0 }}/{{ res.maxMonkeyNum }}</span>
        </div>
        <div v-if="res.currentDefenseNum != null">
          <x-button mini type="warn" :disabled="res.currentDefenseNum == res.maxDefenseNum" @click.native="addStone(0,(res.maxDefenseNum - res.currentDefenseNum)*res.ratio)">修建</x-button>
          <span>{{ res.currentDefenseNum || 0  }}/{{ res.maxDefenseNum }}</span>
        </div>
      </div>
    </div>
    <!-- 驻防 -->
    <div class="panel arrange-panel" v-show="showDefendList">
      <help class="help">
        <div>
          <p>点亮小猴右上角的神仙草图标表示携带神仙草。
          <br>守城方驻守小猴，攻城方派遣小猴时都可以选择为某一只或者全部小猴携带{{ res.herbFee }}颗神仙草，在战斗中小猴首次血量低于2KG进入重伤、俘虏、死亡判断时一次性使用{{ res.herbFee }}颗神仙草恢复此小猴战斗前血量的{{ res.herbRatio }}%，受伤小猴不会消耗神仙草；
<br>攻击方，战斗中未使用的神仙草会带回，取消攻击时神仙草带回。守城方战斗后未使用的神仙草依然会存在小猴口袋，以备不时之需。
          </p>
        </div>
      </help>
      <div class="arrange">
        <div class="position" @click="showMyMonkeyList(index,item)" v-for="(item,index) in defenseMonkeyList" :key="'defense'+index">
          <div class="img-wrap">
            <div class="empty">
              <span>战{{index+1}}</span>
              <p>未部署</p>
            </div>
            <img v-if="item" :src="item.facade" :style="{background: item.background}">
            <div class="tag" v-if="item">战{{index+1}}</div>
            <div v-if="item" class="herb" :class="{'withherb': item.magicHerb == 1}" @click.stop="clickHerb(index)"></div>
          </div>
          <div class="info" v-if="item">
            <span>力:{{ item.makeMoney }} 体:{{ item.weight | toFix(1) }}hp</span>
            <p>#{{ item.id }}·{{ item.generation }}代</p>
          </div>
        </div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="checker">
        <check-icon :value.sync="allHerb">全部携带神仙草</check-icon>
      </div>
      <div class="submit" v-if="isListChanged || isHerbListChanged">
        <x-button type="primary" @click.native="submitMonkey()">{{ res.currentDefenseNum == null ? '确认进攻' : '确认驻防'}}</x-button>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showPicker" @on-first-show="firstLoad = true" height="80%" class="picker-list">
        <h2 @click="showFilter = true">选择参战的小猴</h2>
        <div class="filter">
          <ul class="order">
            <li :class="{'active': item.value == params.orderBy,'up': params.sort == 0}" @click="changeOrder(item.value)" v-for="(item, index) in monkeyOrder" :key="index">{{item.name}}</li>
          </ul>
          <div class="btns">
            <div class="option" @click="showFilter = true"></div>
          </div>
        </div>
        <div class="scroll">
          <div class="panel" @click="chooseMonkey(item)" v-for="(item,index) in inDefenseMonkeyList" v-if="item" :key="'mymonkey'+index">
            <div class="img">
              <img :src="item.facade" :style="{background: item.background}">
            </div>
            <div class="info">
              <div># {{ item.id }}·{{ item.generation }}代</div>
              <div>
                <span>力量：</span>
                <em>{{ item.makeMoney }}</em>
              </div>
              <div>
                <span>体重：</span>
                <em>{{ item.weight }}</em>
              </div>
            </div>
            <div class="tag" v-if="currentPosition(item.id) > -1">战{{currentPosition(item.id)+1}}</div>
          </div>
          <div class="panel" @click="chooseMonkey(item)" v-for="(item,index) in myMonkeyList" :key="'monkey'+index">
            <div class="img">
              <img :src="item.facade" :style="{background: item.background}">
            </div>
            <div class="info">
              <div># {{ item.id }}·{{ item.generation }}代</div>
              <div>
                <span>力量：</span>
                <em>{{ item.makeMoney }}</em>
              </div>
              <div>
                <span>体重：</span>
                <em>{{ item.weight }}</em>
              </div>
              <div class="tag" v-if="currentPosition(item.id) > -1">战{{currentPosition(item.id)+1}}</div>
            </div>
          </div>
          <infinite-loading v-if="firstLoad" @infinite="getMyMonkeyList" ref="infiniteLoading1">
            <span slot="no-more"></span>
            <div slot="no-results">
              <br>
              <empty></empty>
            </div>
            <spinner slot="spinner" type="lines"></spinner>
          </infinite-loading>
        </div>
      </popup>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="showFighting" hide-on-blur class="package">
        <div class="box">
          <h2>{{ fightResult.attacker }}正在攻城，请稍后</h2>
          <img src="/static/fight.svg">
          <p v-if="fightResult.msg">{{ fightResult.msg }}</p>
          <div v-if="fightResult.id">
            <p>攻城{{ fightResult.result == 1 ? '成功' : '失败' }}</p>
            <router-link :to="`/battle?id=${fightResult.id}`">查看战报</router-link>
          </div>
        </div>
      </x-dialog>
    </div>
    <!-- 复杂筛选 -->
    <div v-transfer-dom>
      <popup v-model="showFilter" position="right" width="100%" class="filters">
        <div class="wrap">
          <div class="block">
            <group :title="$t('代数')" class="input-range">
              <x-input v-model="params.startGen" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endGen" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('体重')" class="input-range">
              <x-input v-model="params.startWeight" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endWeight" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('力量值')" class="input-range">
              <x-input v-model="params.startMakeMoney" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endMakeMoney" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
          </div>
        </div>
        <div class="button">
          <x-button type="warn" class="btn" @click.native="resetFilter">{{$t('重置')}}</x-button>
          <x-button type="primary" class="btn" @click.native="enterFilter">{{$t('确定')}}</x-button>
        </div>
      </popup>
    </div>
  </div>
</template>

<i18n>

</i18n>
<script>
  import {
    XButton,
    Box,
    Group,
    Cell,
    Range,
    XInput,
    TransferDomDirective as TransferDom,
    Popup,
    Clocker,
    XDialog,
    Spinner,
    InlineXNumber,
    XTextarea,
    CheckIcon
  } from 'vux'
  import empty from './common/empty.vue'
  import CountDown from './common/vue2-countdown.vue'
  import InfiniteLoading from 'vue-infinite-loading';
  import Help from './common/help.vue'
  import {
    clearTimeout
  } from 'timers';
  export default {
    directives: {
      TransferDom
    },
    components: {
      XButton,
      Box,
      Group,
      Cell,
      Range,
      XInput,
      empty,
      Popup,
      Clocker,
      XDialog,
      CountDown,
      InlineXNumber,
      Spinner,
      InfiniteLoading,
      XTextarea,
      Help,
      CheckIcon
    },
    data() {
      return {
        colorList: ['#4aa0f8', '#741b7b', '#ec5751', '#6dbef9', '#eebb4c', '#5fca71', '#ef7b30', '#66cbc3', '#4c5a7d', '#d19239'],
        category: ['简介', '战斗记录', '收益记录'],
        params: {
          current: 1,
          orderBy: 1, // 1:代数,2:体重,3:收益,4:id,5:掘金(攻击力)
          sort: 0,
          startGen: '',
          endGen: '',
          startMakeMoney: '',
          endMakeMoney: '',
          startWeight: '',
          endWeight: '',
        },
        monkeyOrder: [{
            name: '代数',
            value: 1
          },
          {
            name: '体重',
            value: 2
          },
          {
            name: 'ID',
            value: 4
          },
          {
            name: '力量',
            value: 5
          }
        ],
        defenseMonkeyList: [],
        inDefenseMonkeyList: [],
        originalList: [],
        activePosition: null,
        submitList: [],
        showDefendList: false,
        activeIndex: 0,
        firstLoad: false,
        id: '',
        res: null,
        showPicker: false,
        myMonkeyList: [],
        swiperOption: {
          autoHeight: true,
          spaceBetween: 30,
          on: {
            transitionEnd: () => {
              this.activeIndex = this.swiper.activeIndex
            },
          },
        },
        timer: null,
        systemTime: Date.parse(new Date()),
        canEdit: false,
        nameCanEdit: false,
        oRemarkTxt: '',
        showFighting: false,
        fightResult: {
          attacker: '',
          id: null,
          result: null,
          msg: ''
        },
        herbList: [],
        oHerbList: [],
        allHerb: false,
        showFilter: false
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      },
      isListChanged() {
        return !(this.submitList.toString() == this.originalList.toString())
      },
      isHerbListChanged() {
        return !(this.herbList.toString() == this.oHerbList.toString())
      }
    },
    watch: {
      allHerb(val) {
        console.log(val);
        this.allCarryHerb(val)
      }
    },
    beforeRouteUpdate(to, from, next) {
      next()
      this.id = this.$route.params.id;
      this.initData();
    },
    mounted() {
      this.$nextTick(function() {
        this.id = this.$route.params.id;
        this.timer = setInterval(() => {
          this.systemTime += 1000
        }, 1000);
        this.initData();
      });
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      initData() {
        this.$http
          .post(`/gameCastle/detail`, {
            id: this.id
          })
          .then(res => {
            if (res.code == 200) {
              if (res.result.id) {
                this.res = res.result;
                this.oRemarkTxt = res.result.castleRemark;
                this.oNameTxt = res.result.castleNickname;
                if (res.result.defenseMonkeyList && res.result.defenseMonkeyList.length > 0) {
                  this.defenseMonkeyList = res.result.defenseMonkeyList
                  this.inDefenseMonkeyList = res.result.defenseMonkeyList.concat()
                } else {
                  this.defenseMonkeyList = new Array(res.result.maxMonkeyNum)
                  this.inDefenseMonkeyList = []
                  this.herbList = new Array(res.result.maxMonkeyNum).fill(0)
                }
                this.packSubmitList(true)
              } else {
                this.$router.replace('/404')
              }
            } else {}
          })
          .catch(function(error) {});
      },
      feedRecords($state) {
        this.$http
          .post(`/game/feedPageByMonkey`, {
            current: this.current,
            monkeyId: this.id
          })
          .then(res => {
            if (res.code == 200) {
              if (res.result.total > 0) {
                this.records = this.records.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
            } else {}
          })
          .catch(function(error) {});
      },
      submitMonkey() {
        this.$vux.loading.show()
        this.$http
          .post(`/gameCastle/addDefenseMonkey`, {
            flag: this.res.currentDefenseNum != null,
            monkeyIdList: this.submitList.toString(),
            magicHerbList: this.herbList.toString(),
            castleId: this.id
          })
          .then(res => {
            this.$vux.loading.hide()
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.initData()
              this.firstLoad = false
            } else {}
          })
          .catch(function(error) {});
      },
      editDone() {
        this.canEdit = false
        if (this.oRemarkTxt == this.res.castleRemark) {
          return
        }
        this.$http
          .post(`/gameCastle/update`, {
            castleId: this.id,
            remark: this.res.castleRemark
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.initData()
            } else {}
          })
          .catch(function(error) {});
      },
      nameEditDone() {
        this.nameCanEdit = false
        if (this.oNameTxt == this.res.castleNickname) {
          return
        }
        this.$http
          .post(`/gameCastle/update`, {
            castleId: this.id,
            name: this.res.castleNickname
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.initData()
            } else {}
          })
          .catch(function(error) {});
      },
      cancelAttack(id) {
        this.$http
          .post(`/gameCastle/cancelAttack`, {
            castleId: this.id,
            attackId: id
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.initData()
            } else {}
          })
          .catch(function(error) {});
      },
      addStone(type, stoneNum) {
        var that = this;
        if (type) {
          if (stoneNum > that.res.stone) {
            that.$vux.toast.text('你的石头数量不足')
            return
          }
          this.$vux.confirm.show({
            title: '升级城堡',
            content: `确认消耗${stoneNum}块石头升级城堡吗？`,
            confirmText: '确认',
            cancleText: '算了',
            onConfirm() {
              that.addStoneConfirm(stoneNum)
            }
          })
        } else {
          this.$vux.confirm.prompt(`最多可添加${stoneNum}块石头`, {
            title: `修建城堡(${this.res.ratio}石头/1城防)`,
            inputAttrs: {
              type: 'number'
            },
            onConfirm(value) {
              if (value > that.res.stone) {
                that.$vux.toast.text('你的石头数量不足！')
                return
              }
              if (value > stoneNum) {
                that.$vux.toast.text('超出数量限制！')
                return
              }
              if (!(/(^[1-9]\d*$)/.test(value))) {　　　　　　
                that.$vux.toast.text('石头数量必须为正整数！')
                return　　　　
              }
              that.addStoneConfirm(value)
            }
          })
        }
      },
      addStoneConfirm(stoneNum) {
        this.$http
          .post(`/gameCastle/addStone`, {
            castleId: this.id,
            addNum: stoneNum
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.initData()
            } else {}
          })
          .catch(function(error) {});
      },
      calcPercent(item) {
        if (this.systemTime > item.actualAttackTime) {
          return 100
        }
        if (this.systemTime == item.actualAttackTime) {
          // console.log(this.systemTime == item.actualAttackTime)
          // this.checkResult(item)
        }
        var percent = ((this.systemTime - item.launchAttackTime) / (item.actualAttackTime - item.launchAttackTime) * 100).toFixed(0);
        return percent
      },
      checkResult(item) {
        // 700未开始 701已取消 703进入保护期
        this.showFighting = true
        this.fightResult = {
          attacker: item.attacker,
          id: item.id
        }
        var counter = 0
        clearTimeout(timer)
        var timer = setTimeout(() => {
          this.$http
            .get(`/gameCastle/attackDetail?attackId=${item.id}`)
            .then(res => {
              switch (res.code) {
                case 200:
                  this.fightResult.result = res.result.reslut
                  break;
                case 700:
                  // this.checkResult(item)
                  break;
                case 701:
                  this.fightResult.msg = res.msg
                  break;
                case 703:
                  this.fightResult.msg = res.msg
                  break;
              }
            })
            .catch(function(error) {});
        }, 5000);
      },
      currentPosition(monkeyId) {
        return this.submitList.indexOf(monkeyId)
      },
      packSubmitList(isFirst) {
        var arr = new Array()
        var herb = new Array()
        for (let index = 0; index < this.defenseMonkeyList.length; index++) {
          const element = this.defenseMonkeyList[index];
          if (element == null) {
            arr.push(-1)
            herb.push(0)
          } else {
            herb.push(element.magicHerb)
            arr.push(element.id)
          }
        }
        if (isFirst) {
          this.originalList = arr.concat()
          this.oHerbList = herb.concat()
        }
        this.submitList = arr.concat()
        this.herbList = herb.concat()
      },
      timeLeft(end) {
        var t = end - this.systemTime
        if (t > 0) {
          var min = Math.floor((t / 60000) % 60);
          var sec = Math.floor((t / 1000) % 60);
          min = min < 10 ? "0" + min : min;
          sec = sec < 10 ? "0" + sec : sec;
          var format = `${min}分${sec}秒后抵达`;
          return format;
        } else {
          return '已抵达'
        }
      },
      changeCategory(index) {
        this.activeIndex = index
        this.swiper.slideTo(index, 300, true);
      },
      getMyMonkeyList($state) {
        this.showPicker = true
        var that = this
        this.$http
          .post(`game/myMonkeyPageForCastle`, this.params)
          .then(res => {
            if (res.code == 200) {
              if (res.result.total > 0) {
                this.myMonkeyList = this.myMonkeyList.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.params.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      showMyMonkeyList(position, monkey) {
        if (monkey && monkey.id) {
          this.defenseMonkeyList[position] = null
          this.packSubmitList()
          return
        }
        this.showPicker = true
        if (!this.firstLoad) {
          this.firstLoad = true
          setTimeout(() => {
            this.resetData()
          }, 1000);
        }
        this.activePosition = position
      },
      chooseMonkey(monkey, position) {
        this.showPicker = false;
        var monkeyId = monkey.id
        this.allHerb ? monkey.magicHerb = 1 : monkey.magicHerb = 0;
        var indexMonkeyId = this.submitList.indexOf(monkeyId)
        if (indexMonkeyId > -1) {
          this.defenseMonkeyList[indexMonkeyId] = null
        }
        this.defenseMonkeyList[this.activePosition] = monkey
        this.packSubmitList()
      },
      clickHerb(index) {
        console.log(index);
        if(this.defenseMonkeyList[index].magicHerb == 1) {
          
          this.defenseMonkeyList[index].magicHerb = 0
        }else {
          this.defenseMonkeyList[index].magicHerb = 1
        }
        console.log(this.defenseMonkeyList[index]);
        this.packSubmitList()
      },
      allCarryHerb(val) {
        var n = val ? 1 : 0
        for (let index = 0; index < this.defenseMonkeyList.length; index++) {
          const element = this.defenseMonkeyList[index];
          if (element) {
            this.defenseMonkeyList[index].magicHerb = n;
          }
        }
        this.packSubmitList()
      },
      changeOrder(order) {
        //点击同一个
        if (order == this.params.orderBy) {
          this.params.sort = this.params.sort == 0 ? 1 : 0;
        } else {
          this.params.orderBy = order;
          this.params.sort = 1
        }
        this.resetData()
      },
      resetData() {
        this.params.current = 1;
        this.myMonkeyList = []
        this.$refs.infiniteLoading1.$emit('$InfiniteLoading:reset');
      },
      resetFilter() {
        this.params.startGen = '';
        this.params.endGen = '';
        this.params.startMakeMoney = '';
        this.params.endMakeMoney = '';
        this.params.startWeight = '';
        this.params.endWeight = '';
      },
      enterFilter() {
        this.$nextTick(() => {
          this.resetData()
          this.showFilter = false
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
    &:before {
      content: '';
      width: 1px;
      min-height: 101%;
      position: absolute;
    }
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    .edit-name {
      flex: 1;
    }
  }
  .monkey {
    display: flex;
    .img {
      margin-right: 10px;
      width: 120px;
      height: 120px;
      border-radius: 4px;
      overflow: hidden;
      flex-shrink: 0;
      img {
        width: 120px;
        height: 120px;
        background-color: #e5ffde;
        border-radius: 2px;
      }
    }
    .info {
      font-size: 12px;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      line-height: 1;
      white-space: nowrap;
      flex: 1;
      overflow: hidden;
      span {
        color: $grey;
      }
      .next {
        span {
          vertical-align: middle;
        }
        color: $grey;
      }
      p {
        overflow: hidden;
        text-overflow: ellipsis;
        color: #333;
      }
    }
  }
  .category {
    padding-top: 15px;
  }
  .filter {
    display: flex;
    justify-content: space-between;
    white-space: nowrap; // flex-wrap: wrap;
    font-size: 12px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 12px; // border-radius: 4px;
    // box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
    border-bottom: 1px solid #dfdfdf;
    ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
      }
    }
    .status {
      color: $grey;
      li {
        transition: all .3s;
      }
      li:not(:last-child) {
        margin-right: 12px;
      }
      .active {
        color: $green;
        font-size: 14px;
        border-bottom: 2px solid $green;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      .option {
        width: 28px;
        height: 28px;
        margin-left: 5px;
        background: url() no-repeat 50%;
        background-size: 16px 16px;
      }
    }
  }
  .filters {
    overflow: hidden;
    background: #fbf9fe;
    &::-webkit-scrollbar {
      display: none;
    }
    .wrap {
      padding-bottom: 60px;
      height: 100%;
      overflow-y: scroll;
      padding: 12px;
    }
    .button {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      .btn {
        width: 50%;
        height: 40px;
        margin: 0;
        border: 0;
        border-radius: 0;
        &:after {
          display: none;
        }
      }
    }
  }
  .swiper {
    margin-top: 10px;
  }
  .vistor {
    font-size: 14px;
    padding: 5px;
    color: #666;
  }
  .gold {
    li {
      display: flex;
      justify-content: space-between;
      padding: 5px 4px;
      white-space: nowrap;
      &:nth-child(even) {
        background-color: #f5f5f5;
      }
      div {
        width: 33.33%;
        font-size: 10px;
        color: $grey;
        &:nth-child(2) {
          text-align: center;
        }
        &:nth-child(3) {
          text-align: right;
          color: $green;
        }
      }
    }
  }
  .battle {
    ul {
      max-height: 400px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 10px;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    li {
      font-size: 12px;
      border: 1px solid #dfdfdf;
      padding: 5px;
      border-radius: 5px;
      margin-bottom: 10px;
      p {
        color: $gray;
      }
      .bat {
        display: flex;
        align-items: center;
        div {
          width: 33.33%;
          white-space: nowrap;
          overflow: hidden;
          text-align: center;
          p {
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        img {
          width: 60px;
          height: 60px;
        }
        .result {
          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }
  }
  .arrange-panel {
    padding-top: 40px;
  }
  .btns {
    display: flex;
    justify-content: center; // align-content: center;
    padding: 5px 0;
    div {
      width: 33.33%;
      text-align: center;
      span {
        font-size: 10px;
        color: $grey;
        white-space: nowrap;
      }
      button {
        margin: 0 auto;
        display: block;
        white-space: nowrap;
      }
    }
  }
  .arrange {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    .position {
      font-size: 12px;
      height: 138px;
      align-self: flex-start;
      margin: 0 5px 10px;
    }
    > div:empty {
      width: 100px;
      height: 1px;
      margin: 0 5px 0;
    }
    .img-wrap {
      width: 100px;
      height: 100px;
      border-radius: 5px;
      background: #f3f0f0;
      box-shadow: inset 0px 0px 20px 0px #d6d6d6;
      position: relative;
      overflow: hidden;
      img {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .tag {
        position: absolute;
        color: $grey;
        background-color: rgba(255, 255, 255, .8);
        left: 0;
        top: 6px;
        padding: 0 8px 0 0;
        border-radius: 0 100px 100px 0;
      }
    }
    .empty {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
    }
    
    .herb {
      background: url(/static/herb.png) no-repeat 50%;
      background-size: 20px;
      width: 30px;
      height: 30px;
      position: absolute;
      right: 0;
      top: 0;
      &.withherb {
        background: url(/static/withherb.png) no-repeat 50%;
        background-size: 20px;
      }
    }
    .info {
      width: 100px;
      overflow: hidden;
      white-space: nowrap;
      span {
        color: $grey;
        font-size: 10px;
      }
    }
  }
  .checker {
      text-align: center;
      padding-bottom: 10px;
    }
  .picker-list {
    // width: 100%;
    // min-height: 100%;
    background-color: #fbf9fe;
    overflow: hidden;
    h2 {
      text-align: center;
      font-size: 16px;
      color: $tmdark;
      padding: 10px 0;
    }
    .filter {
      display: flex;
      justify-content: space-between;
      white-space: nowrap; // flex-wrap: wrap;
      font-size: 12px;
      background: #fff;
      height: 40px;
      line-height: 40px;
      padding: 0 12px;
      margin: 0 8px 12px;
      border-radius: 4px;
      box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
      overflow-x: scroll;
      overflow-y: hidden;
      &::-webkit-scrollbar {
        display: none;
      }
      ul {
        display: flex;
        align-items: center;
        li {
          cursor: pointer;
        }
      }
      .order {
        color: $link;
        li+li {
          margin-left: 12px;
        }
        .active:after {
          content: "";
          display: inline-block;
          vertical-align: middle;
          margin-top: -2px;
          width: 12px;
          height: 12px;
          background: url() no-repeat 50%;
          background-size: cover;
        }
        .active.up:after {
          transform: rotate(-180deg);
        }
      }
    }
    .scroll {
      height: 100%;
      overflow-y: scroll;
      padding-bottom: 100px;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .panel {
      display: flex;
      overflow: hidden;
      .img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        img {
          width: 100%;
          background-color: #e5ffde;
        }
      }
      .info {
        height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 12px;
        color: #333;
        white-space: nowrap;
        em {
          font-style: normal;
          color: $grey;
        }
      }
      .tag {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 14px;
        background: #ff4949;
        color: #fff;
        padding: 2px 5px;
        border-radius: 0 5px;
      }
    }
  }
  .dialog {
    h2 {
      font-size: 20px;
      padding: 15px 0 0;
    }
    .content {
      padding: 12px;
      text-align: left;
      max-height: 400px;
      overflow-y: scroll;
      .time {
        font-size: 12px;
        color: $gray;
      }
      .address {
        color: $grey;
        word-break: break-all;
        font-size: 12px;
        padding: 10px 0;
        line-height: 1.2;
      }
      .transfer {
        font-size: 14px;
        color: $gray;
      }
      .item {
        color: $gray;
        margin-bottom: 10px;
        span {
          color: $green;
        }
      }
      .tip {
        font-size: 12px;
        color: $grey;
      }
      .center {
        text-align: center;
      }
    }
  }
  .progress {
    margin-bottom: 15px;
  }
  .package {
    .box {
      padding: 12px;
      h2 {
        font-size: 16px;
      }
    }
  }
</style>

<style lang="scss">
  .vm-progress-bar__innerText {
    text-shadow: 1px 0px 2px #1b1919;
  }
  .progress {
    display: flex;
    align-items: center;
    .vm-progress {
      width: 80%;
      flex: 1;
    }
    .icon {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: $red;
      cursor: pointer;
    }
  }
  .brief,
  .edit-name {
    .weui-cells {
      margin-top: 0;
      font-size: 14px;
      background: transparent;
      &:before {
        display: none;
      }
      &:after {
        display: none;
      }
      .weui-cell {
        padding: 5px;
        border: 1px solid transparent;
      }
    }
  }
  .editable {
    .weui-cells {
      .weui-cell {
        border: 1px solid #2e8ccf;
        border-radius: 5px;
      }
    }
  }
  .edit-name {
    height: 54px;
    .weui-cells {
      .weui-cell {
        padding: 0;
      }
    }
  }
  .edit-name textarea {
    background: transparent;
    font-size: 22px;
    color: #36465d;
    line-height: 54px;
    font-weight: 500;
    height: 54px;
  }
  .package {
    .weui-dialog {
      border-radius: 15px;
    }
  }
</style>


